<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Fluenty Survey</title>
    <style>
      body {
        margin: 0 auto;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
          'Helvetica Neue', sans-serif;
        background-color: #fff;
        max-width: 600px;
      }
      .container {
        padding: 20px;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      .nav-progress-container {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        gap: 15px;
      }
      .back-button {
        width: 30px;
        height: 30px;
        border: none;
        background: none;
        cursor: pointer;
        color: #2b85e4;
        font-size: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .back-button svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }
      .progress-bar {
        flex: 1;
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 3px;
      }
      .progress {
        height: 100%;
        width: 86.58%;
        background-color: #2b85e4;
        border-radius: 3px;
      }
      .title {
        font-size: 36px;
        font-weight: bold;
        color: #0B4983;
        margin-bottom: 30px;
        line-height: 1.3;
        text-align: center;
      }
      .subtitle {
        font-size: 22px;
        font-weight: 500;
        color: #333;
        margin-bottom: 40px;
        text-align: center;
      }
      .interests-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin-bottom: 40px;
        max-width: 720px;
        align-self: center;
      }
      .interest-item {
        display: flex;
        align-items: center;
        padding: 14px 18px;
        border-radius: 50px;
        background-color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #e0e0e0;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 100px;
        width: fit-content;
        flex: 0 1 auto;
      }
      .interest-item.selected {
        background-color: #e6f4ff;
        border: 1px solid #2b85e4;
        box-shadow: 0 2px 12px rgba(43, 133, 228, 0.15);
      }
      .interest-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      .interest-icon {
        font-size: 24px;
        margin-right: 12px;
      }
      .interest-name {
        font-size: 18px;
        font-weight: 500;
        color: #333;
      }
      .continue-button {
        background-color: #3b82f6;
        color: white;
        border: none;
        border-radius: 12px;
        padding: 16px;
        font-size: 18px;
        font-weight: bold;
        width: 100%;
        cursor: pointer;
        text-align: center;
        margin-top: auto;
        margin-bottom: 20px;
        max-width: 720px;
        align-self: center;
      }
      .continue-button:disabled {
        background-color: #94a3b8;
        cursor: not-allowed;
      }
      .continue-button:not(:disabled):hover {
        background-color: #2563eb;
      }
      @media (max-width: 480px) {
        .title {
          font-size: 32px;
        }
        .subtitle {
          font-size: 18px;
        }
        .interest-item {
          padding: 12px 16px;
        }
        .interest-icon {
          font-size: 20px;
          margin-right: 8px;
        }
        .interest-name {
          font-size: 16px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="nav-progress-container">
        <button class="back-button">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
          </svg>
        </button>
        <div class="progress-bar">
          <div class="progress"></div>
        </div>
      </div>

      <h1 class="title">What's your personal interests?</h1>
      <h2 class="subtitle">The choice won't limit your experience</h2>

      <div class="interests-grid">
        <div class="interest-item">
          <span class="interest-icon">🔬</span>
          <span class="interest-name">Science</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">📖</span>
          <span class="interest-name">Literature</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🌎</span>
          <span class="interest-name">Languages</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🏛</span>
          <span class="interest-name">Politics</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🧠</span>
          <span class="interest-name">Psychology</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">⚪</span>
          <span class="interest-name">Philosophy</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🌐</span>
          <span class="interest-name">Sociology</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🚀</span>
          <span class="interest-name">Entrepreneurship</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">📰</span>
          <span class="interest-name">News</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">💰</span>
          <span class="interest-name">Finance</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🌌</span>
          <span class="interest-name">Astronomy</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">➗</span>
          <span class="interest-name">Mathematics</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🏗️</span>
          <span class="interest-name">Architecture</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🎬</span>
          <span class="interest-name">Animation</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">📈</span>
          <span class="interest-name">Marketing</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">✒️</span>
          <span class="interest-name">Journalism</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">💻</span>
          <span class="interest-name">Software</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🎤</span>
          <span class="interest-name">Pop Culture</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🔍</span>
          <span class="interest-name">Cooking</span>
        </div>
        <div class="interest-item">
          <span class="interest-icon">🥑</span>
          <span class="interest-name">Food</span>
        </div>
      </div>

      <button class="continue-button" disabled>Continue</button>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const backButton = document.querySelector('.back-button');
        const continueButton = document.querySelector('.continue-button');
        const interestItems = document.querySelectorAll('.interest-item');
        let selectedInterests = [];

        // 从本地存储中恢复选中状态
        const storedData = localStorage.getItem('whatPersonal');
        if (storedData) {
            const parsedData = JSON.parse(storedData);
            selectedInterests = parsedData.interests;
            selectedInterests.forEach(interest => {
                interestItems.forEach(item => {
                    const interestName = item.querySelector('.interest-name').textContent;
                    if (interestName === interest) {
                        item.classList.add('selected');
                        item.style.backgroundColor = '#EBF5FF'; // 设置选中卡片背景颜色
                    }
                });
            });
        }

        // 根据初始选中状态设置按钮的禁用状态和背景颜色
        function updateContinueButtonState() {
            continueButton.disabled = selectedInterests.length === 0;
            if (continueButton.disabled) {
                continueButton.style.backgroundColor = '#B1D9FF'; // 禁用时的背景颜色
            } else {
                continueButton.style.backgroundColor = '#3b82f6'; // 启用时的背景颜色
            }
        }
        updateContinueButtonState();

        // Back button functionality
        backButton.addEventListener('click', function () {
            // 每次返回时也更新按钮状态
            updateContinueButtonState(); 
            window.location.href = 'answer.html';
        });

        // Interest item selection functionality
        interestItems.forEach(item => {
            item.addEventListener('click', function () {
                this.classList.toggle('selected');

                const interestName = this.querySelector('.interest-name').textContent;

                if (this.classList.contains('selected')) {
                    if (!selectedInterests.includes(interestName)) {
                        selectedInterests.push(interestName);
                    }
                    this.style.backgroundColor = '#EBF5FF'; // 设置选中卡片背景颜色
                } else {
                    const index = selectedInterests.indexOf(interestName);
                    if (index > -1) {
                        selectedInterests.splice(index, 1);
                    }
                    this.style.backgroundColor = 'white'; // 移除选中状态时恢复背景颜色
                }

                // 更新按钮状态
                updateContinueButtonState(); 
            });
        });

        // Continue button functionality
        continueButton.addEventListener('click', function () {
          // 获取页面标题和当前页面名称
          const pageTitle = document.querySelector('.title')
            ? document.querySelector('.title').textContent.trim()
            : "What's your personal interests?";
          const subtitle = document.querySelector('.subtitle')
            ? document.querySelector('.subtitle').textContent.trim()
            : "The choice won't limit your experience";
          const pageName = window.location.pathname.split('/').pop().split('.')[0];

          // 创建数据对象
          const data = {
            title: pageTitle,
            subtitle: subtitle,
            value: selectedInterests.join(', '), // 用逗号分隔多个选择
            interests: selectedInterests, // 保存为数组，便于后续处理
            count: selectedInterests.length, // 选择的兴趣数量
          };

          // 以JSON格式存储到localStorage
          localStorage.setItem(pageName, JSON.stringify(data));

          // Navigate to the areThere.html page
          window.location.href = 'areThere.html';
        });
      });
    </script>
  </body>
</html>
